<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爬虫后台登录</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <div>
            <!--flex弹性盒子模型，justify-content：主抽 -->
            <div style="display: flex;justify-content: center;margin-top: 150px">
              <el-card style="width: 400px">
                <div slot="header" class="clearfix">
                  <span>用户登录</span>
                </div>
                <table>
                  <tr>
                    <td>用户名:</td>
                    <td>
                      <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td>密码:</td>
                    <td>
                      <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
                      <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
                    </td>
                  </tr>
                  <tr>
                    <!-- 占两行-->
                    <td colspan="2">
                      <!-- 点击事件的两种不同的写法v-on:click和 @click-->
                      <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
                      <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
                    </td>
                  </tr>
                </table>
              </el-card>
            </div>
          </div>
    </div>
    <script>
        var app =new Vue({
            el:"#app",
           // delimiters:["[[","]]"],
            data:{
                user:{
                  username:'admin',
                  password:'pass',}
            },
            mounted:function(){
                // this.fetchData();
            },
            methods:{
                doLogin(){
                  var self = this;
                  user=this.user.username;
                  pwd=this.user.password;
                  url='/reptile/login/'+user+','+pwd
                  axios.get(url).then(response=>{
                    console.log(response)
                  }),err=>{
                    console(err);
                  }
                }
            }
        });
    </script>
</body>
</html>